<template>
	<view class="classify" >
			
		
			
			<image class="nogoodImage" src="/static/image/good/nogoods.png" v-if="!rightData.list || this.rightData.list.length==0"></image>
			
			<view class="nogoodshint" v-if="!rightData.list || this.rightData.list.length==0">更多产品正在赶来...</view>
			
			
			<!-- 顶部按钮 -->
			<!-- <view style="color:#eeeeee;height:1upx"></view> -->
			<view class="NaviView">
			
				<view class="naviButton" v-for="(item ,index) in navigationArr" :key = "index"
				 @click="navigationSelect(index)">
				  
			
				  {{item}}
				  
				  <view class="lineView" v-if="navigationSelectIndex==index"></view>
				  
				  
				  </view>
			
			</view>
			
			
			<view class="contentView">
				
			
				
			<view class="leftClass">
				
			<view class="scollerBoxView" >
				
			<view :style="{'width':getWidthWithIndex(4)}" 
			 class="leftCell" :class="selectLeft==-1?'select':''"  @click="leftButtonSelect(-1)">
				全部分类</view>
				
			</view>
				
			<!-- :style="{'margin-top': index==1?'0upx':''}" -->
			
			<view class="scollerBoxView"   v-for="(item ,index) in leftCatArr" :key = "index">
				
				<view class="leftCell"  :style="{'width':getWidthWithIndex(item.name.length)}"
				:class="selectLeft==index?'select':''" @click="leftButtonSelect(index)">
				{{item.name}}</view>
				
				
			</view>
					
		
				
			</view>
			
			
		
			<view class="rightView">
				
				
				
		
			<view class="sepLeft">
				
				<!-- {{rightData.list}} -->
				<view class="goodBox" v-if="index%2==0" v-for="(item,index) in rightData.list" :key="index" @click="enterGoodsDetail(index)">
					
					
				<!-- 	<image class="hotImageicon" v-if="index==0" src="/static/image/my/homegoodWaterflow.png" 
					mode="aspectFill" ></image> -->
					
					<!-- {{item}} -->
					
					<image class="goodImage":src="item.album[0]" mode='aspectFill'></image>
					
					<view class="goodname">
						{{item.name}}
					</view>
					
					<view class="hintView">
					
						<view class="goods-priceview">￥{{item.price}}</view>
					
						<view class="goods-PV">{{item.product.pv==''?'':item.product.pv}}积分</view>
									
					
					</view>
				</view>
				
				
				
			</view>
							 
				
				
				<view class="sepLeft">
					
					
					<view class="goodBox" style="margin-left: 13upx;" v-if="index%2==1" v-for="(item,index) in rightData.list" :key="index" @click="enterGoodsDetail(index)">
						
						
						<image class="hotImageicon" v-if="index==0" src="/static/image/my/homegoodWaterflow.png" 
						mode="aspectFill" ></image>
						
						
						<image class="goodImage":src="item.album[0]" mode='aspectFill'></image>
						
						<view class="goodname">
							{{item.name}}
						</view>
						
						<view class="hintView">
						
							<view class="goods-priceview">￥{{item.price}}</view>
						
							<view class="goods-PV">{{item.product.pv}}积分</view>
										
						
						</view>
					</view>
					
					
					
				</view>
				
				
				
	<!-- 		<view style="width: 50%;height: 100%;" class="halfright">
				
				<view class="GoodsView" v-if="index%2==0"
				v-for="(item ,index) in rightData.list" :key = "index"
				 >
				 
					  
					  <img :src= "item.album[0]" class="goodsImage"  @click="enterGoodsDetail(index)"></image>
					  
					  <view class="goodsName">{{item.name}}</view>
				
				  
				
				  
				  </view>
				
				
			</view>
			
			<view style="width: 50%;height: 100%;" class="halfright">
				
				
				<view class="GoodsView" v-if="index%2==1"
				v-for="(item ,index) in rightData.list" :key = "index"
				 >
			
					  
					  <img :src= "item.album[0]"  class="goodsImage"  @click="enterGoodsDetail(index)"></image>
					  
					  <view class="goodsName">{{item.name}}</view>
		
				  
				  </view>
				
			</view>
				  -->
				  
			
			
			
				  
			</view>
			
			
			
			</view>
			
		
		</view>
	
		
</template>

<script>
var _this;
import { mapGetters } from 'vuex';
import { goods } from '@/config/mixins.js';
export default {
	mixins: [goods],
	data() {
		return {

			
			navigationSelectIndex : 0,
			
			leftCatArr : [],
			
			navigationArr : ['新人区','会员区','云豆区','全部商品'],			
			

			
			selectLeft : -1,
			
			rightData : [],
			
			
		};
	},
	
	methods: {
		
		enterGoodsDetail (index){
		
			
			var id = this.rightData.list[index].id;
			
			
			console.log(1111);
			
			console.log(id);
			
			// console.log(id);
			
			let url = '/pages/goods/index/index?id='+ id;
			
			console.log(url);
			this.$common.navigateTo(url);
			
		},
	
		navigationSelect(index){
			console.log(index)
			
			if (this.navigationSelectIndex == index){
				return;
			}
			
			this.navigationSelectIndex = index;
			
			
			
			
			this.configData();
		},
		
		leftButtonSelect (index){
			
			if (this.selectLeft == index){
				return;
			}
			
			this.selectLeft = index;
			
			this.configData();
			
			
		},
		
		
		getWidthWithIndex(index){
			
			
			var width = 120 * index /4.0 + 20;
			
			
			// return '140upx';
			
			return  width + "upx";
			
			
			// console.log(index);
			
			
		},

		
		
		
		 configData() {
			
			
			let  data = {
	
				// page : 1,
				
				limit : 20000,
				
				fenqu_id : this.navigationSelectIndex + 1,
				
				
			};
			
			if (this.selectLeft >=0){
				data['goods_cat'] = this.leftCatArr[this.selectLeft].id ;
				
			}
			
			
			console.log(data);
			
			
			
			this.$api.goodsList(data, res => {
		
			console.log(res);
		
				if (res.status) {
					
					console.log(res)
			
					this.rightData = res.data;
			
					// this.configData();	
			
			
				} else {
	
				}
			});		
			
	
		
		},
		
		
		getCat() {
			
			this.$api.getGoodsCat({}, res => {
				
				// console.log(res);
				
				if (res.status) {
					
					this.leftCatArr = res.data;
					
					this.configData();	
					
					
				} else {
			
				}
			});		
					
		
					
		},
		

	
	},
	
	
	
	
	
	onLoad() {
	
		// this.getCat();	
		
	},
	
	onShow() {
		
		// if (this.leftCatArr.length == 0){
			this.getCat();	
		// }
		
		// console.log(111111);
		
	}
	
	
	
};
</script>

<style>

page {
	background-color: #F6F6F6;
}

.classify{
	
	/* background: #F6F6F6; */
	
		/* background-color: #007AFF; */
	
}

.NaviView{
	display: flex;
	width: 100%;
	position: fixed;
	flex-direction: row;
	background: #FF5A5F ;
	height: 100upx;
	top: 0upx;
	
	z-index: 99999;
	
}

.naviButton{
	width: 33.3%;
	color: #FFFFFF;
	font-size: 30upx;
	font-weight: blod;
	/* background: #FFFFFF; */
	height: 100%;
	text-align: center;
	
	
	
	
	line-height: 100upx;
}

.lineView{
	
	/* position: absolute; */
	
	background-color: #FFFFFF;
	
	margin-left: 20%;
	
	margin-top: -20upx;
	
	width: 60%;
	
	height: 4upx;
	
}


.contentView{
	
	position: relative;
	
	width: 100%;
	display: flex;
	flex-direction: column;
	
	overflow: hidden;
	
	margin-top: 100upx;
	
	/* position: fixed; */
	
	/* overflow: hidden; */
	
/* 	top: 190upx;
	bottom: 0px; */
	
	/* height: 100vh ; */
	
	/* background: #000000; */
	
}

.leftClass{
	
	width: 100%;
	
	height: 112upx;
	
	background: #F6F6F6;
	
	position: fixed;
	
	top: 100upx;
	
	/* overflow: hidden; */
	
	/* overflow: scroll; */
	
	
	
	/* flex-wrap: inherit; */
	
	
	display: flex;
	
	flex-direction: row;
	
	
	/* background-color: #007AFF; */
	
	
	z-index: 999999;

	overflow-y: hidden;
	  
	overflow-x: scroll;


	
}


.scollerBoxView{
	
	
/* 	width: 200upx;
	
	dis
	
	height: 100upx; */
	
	margin-left: 36upx;
	
	margin-right: 14upx;
	
	margin-top: 36upx;
	
	/* margin-bottom: 30upx; */
	
	
	display: flex;
	
}


.leftCell{
	
	
	

	color: #FF5A5F;
	
	text-align: center;
	
	
	/* background-color: ''; */
	
	

	
	font-size: 28upx;
	
	
	height: 40upx;
	
	
	display: flex;
	
	

	
	/* -webkit-line-clamp: 1; */
	/* text-overflow: ellipsis; */
	display: block;
	-webkit-box-orient: vertical;
	

	
}

.select{
		
	background-color: #FF5A5F;
	
	color: #FFFFFF;
	
	border-radius: 20upx;
		
}

.rightView{
	
	margin-top: 100upx;
	
	width: 100%;
	

	
	/* height: 200%; */
	
	display: flex;

	flex-direction: row;	
	
	background-color: #F6F6F6;
	
	
	overflow: hidden;
	
	
	/* background-color: #000000; */
	
}

.halfright{
	
	width: 50%;
	height: 100%;
	
	/* background: #4285F4; */
	

	/* background-color: #eeeeee; */
	
}


.rightCell{
	
	width: 100%;
	
	height: 400upx;
	
	
	/* background: #FFC107; */
	
	/* background-color: #007AFF; */
	
	
}

.GoodsView{
	
	
	width: 100%;
	
	height: 340upx;
	
	
	/* background: #FFC107; */
	
	/* background: #555555;
	
/* 	display: flex;


	

	
	justify-content: center;
	
	align-content: center; */
	
	
	    /* display: -webkit-flex; */
	    display: flex;
	    justify-content: center;
	    align-items: center;
		
		flex-direction: column;
}


.goodsImage{
	
	margin-top: 45upx;
	
	width: 200upx;
	
	height: 200upx;
	

}


.goodsName{
	
	width: 80%;
	
	margin-top: 15upx;
	
	margin-left: 20upx;
	
	margin-right: 20upx;
	
	text-align: center;
	
	color: #333333;
	
	height: 200upx;
	
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	
}

.nogoodshint{
	
	/* width: 750upx; */
	
	/* position: absolute; */
	
	/* top: 100upx; */
	
	width: 100%;
	

	
	text-align: center;
	
	
	margin-top: 23upx;
	
	/* line-height:  1150upx; */
	
	/* left: 400upx; */
	
	/* top: 500upx; */
	
	color: #D1D1D1;
	
	font-size: 24upx;
	
	z-index: 9999999;
	

	
	/* background-color: #007AFF; */
	
	
}


.nogoodImage{
	
	margin-top: 473upx;
	
	margin-left: 275upx;
	
	width: 200upx;
	
	height: 166upx;
	
	
	
}




.sepLeft{
	width: 50%;
	
	/* background-color: #EEEEEE; */
	
	/*  */
	/* overflow: hidden; */
	
}


.goodBox{
	
	width: 326upx;
	
	margin-left: 36upx;
	
	margin-top: 36upx;
	
	background-color: #FFFFFF;
	
	/* background-color: #007AFF; */
	
	border-radius: 30upx;
	
	overflow: hidden;
	
	
	
}
	
	
.hotImageicon{
	
	
	margin-top: 20upx;
	
	margin-left: 38upx;
	
	width: 250upx;
	
	height: 76upx;
	
	/* background-color: #000000; */
	
	
}

.goodImage{
	
	/* margin-top: 20upx; */
	
	width: 326upx;
		
	height: 326upx;
	
	
}

.goodname{
	
	margin-top: 30upx;
	
	width: 90%;
	
	margin-left: 5%;
	
	color: #101010;
	
	overflow: hidden;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	
	/* text-align: center; */
	
}


.hintView{
	
	width: 100%;
	
	height: 92upx;
	
	/* background-color: #007AFF; */
	
	display: flex;

	flex-direction: row;
	
	margin-top: 20upx;
	
	margin-bottom: 20upx;
	
}

.goods-priceview{
	
	line-height: 52upx;
	
	color: #101010;
	
	margin-left: 20upx;
	
	font-size: 36upx;
	
	font-weight: bold;
	
	
}

.goods-PV{
	
	margin-left: 30upx;
	margin-top: 15upx;
	
	padding-left: 10upx;
	
	padding-right: 10upx;
	
	/* width: 96upx; */
	height: 24upx;
	line-height: 24upx;
	border-radius: 8px;
	background-color: #FF5A5F;
	color: rgba(255, 255, 255, 100);
	font-size: 18upx;
	text-align: center;

	
	
}



</style>
